<template>
  <el-select
    v-model="form.owner"
    style="width: 100%"
    clearable
    remote
    filterable
    :loading="loading"
    size="medium"
    reserve-keyword
    :remote-method="getCompanyList"
    placeholder="请输入单位名称"
    @change="selectCompany"
  >
    <el-option
      v-for="item in companyNameOptions"
      :key="item.key"
      :label="item.label"
      :value="item.value"
    >
      <span style="float: left">{{ item.label }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px"
        >{{ item.value.organizationCode }}(统一社会信用代码)</span
      >
    </el-option>
  </el-select>
</template>

<script>
import { listCompany } from "@/api/hades/organization/company";

export default {
  name: "AssetApply",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 产权备案申请表格数据
      applyList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {},
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      companyNameOptions: [],
    };
  },
  created() {},
  mounted() {
    this.companyNameOptions = this.getCompanyList();
  },
  methods: {
    selectCompany(val) {
      this.form.newDeviceOwner = val.organizationName;
      this.form.deviceOwnerCode = val.organizationCode;
      this.form.deviceOwnerAddress = val.address;
      this.form.corporate = val.legalMan;
      this.form.techDirector = val.linkMan;
      this.form.techPhone = val.linkPhone;
    },
    selectBlur(val) {
      this.form.newDeviceOwner = val.target.value;
    },
    /** 查询设备产权单位下拉框 */
    getCompanyList(xxx) {
      this.loading = true;
      this.queryParams.organizationName = xxx;
      listCompany(this.queryParams).then((response) => {
        this.companyNameOptions = response.rows.map((item) => {
          return { value: item, label: `${item.organizationName}` };
        });
        this.loading = false;
      });
    },
  },
};
</script>
